<template>
  <div>
    <a-tabs :default-active-key="active" @change="callback">
      <a-tab-pane v-for="p in panesArr" :key="p.key" :tab="p.name"> </a-tab-pane>
    </a-tabs>
    <slot>
      
    </slot>
  </div>
</template>

<script>

export default {
  name: "SpcyWebui319TasComponent",
  props: {
    active: {
      type: String,
      default: "1",
    },
    panes: {
      type: Array,
      default: [],
    },
    panesIndex:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      panesArr:[]
    };
  },

  mounted() {},

  methods: {
    callback(active) {
      this.$emit('active',active)
    },
  },
  watch:{
    panes:{
      immediate:true,
      deep:true,
      handler() {
        if(this.panesIndex === 0) {
          this.panesArr = this.panes
        }else {
          this.panesArr = this.panes.filter((item,index) => index <= this.panesIndex)
        }
      }
    }
  }
};
</script>

<style scoped></style>
